<template>
	<view class="Player">
		<!-- <navBar :title="navBarTitle"></navBar> -->
		<nav-bars backState="1000" bgColor="#fff" fontColor="#000" :title="navBarTitle"></nav-bars>
		<!-- tabs -->
		<view class="tabsList" style="position: fixed;z-index: 99;width: 100%;box-sizing: border-box;flex: 1;border-bottom: 1px solid #eee;" v-show="navBarTitle != '话题'">
			<u-tabs
				:bar-style="tabsBottomStyle"
				:list="list"
				inactive-color="#939393"
				active-color="#333333"
				:is-scroll="true"
				font-size="28"
				:current="current"
				@change="TabsChange"
			></u-tabs>
		</view>
		<!-- list列表 -->
		<view class="live" :style="{ 'margin-top': tabsheight + 'px' }" v-show="navBarTitle != '话题'">
			<view v-if="liveArr.length !== 0">
				<view class="live_item" v-for="(item, index) in liveArr" :key="index" @click="openLive(item, index)">
					<view class="live_image">
						<view class="live_left_img">
							<image :src="item.cover.path" lazy-load></image>
							<view class="live_left_img_main">
								<view class="live_left_img_top">
									<image src="@/static/player/player.png" lazy-load></image>
									<!-- 视频中 -->
								</view>
								<view class="live_left_img_top_look">{{ item.watch_num }}人观看</view>
							</view>
						</view>
					</view>
					<view class="live_right">
						<view class="live_right_title ellipsisText">{{ item.title }}</view>
						<view class="live_right_des"></view>
						<view class="live_right_goods">
							<view class="live_right_goods_item" v-for="(items, indexs) in item.product" v-if="indexs < 2" :key="indexs" @tap.stop="GoGoodsDetaile(items, indexs)">
								<image :src="items.main_imgurl.path" lazy-load></image>
								<view class="live_right_goods_pirce">¥ {{ items.price }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
				<u-empty text="暂无数据" mode="list" icon-size="550" src="https://cos.ryz1620.com/liankun/static/nullBg.png"></u-empty>
			</view>
		</view>
		<view v-if="navBarTitle == '话题'" style="padding: 32rpx;">
			<view
				style="background: #fff;border-radius: 12rpx;overflow: hidden;display: flex;align-items: center;margin-bottom: 20rpx;"
				v-for="(item, index) in DataList"
				:key="index"
				@click="gitdetail(item.id)"
			>
				<view style="width: 200rpx;height: 200rpx;margin-right: 20rpx;"><image :src="item.cover"></image></view>
				<view style="display: flex;justify-content: space-between;flex-direction: column;height: 200rpx;padding: 10rpx 10rpx;flex: 1;">
					<view class="ellipsisText" style="font-size: 28rpx;font-weight: 600;color: #505050;">{{ item.title }}</view>
					<view style="font-size: 26rpx;font-weight: 400;color: #C7C7C7;display: flex;align-items: center;justify-content: space-between;">
						<view>{{ item.ctime }}</view>
						<view>阅读:{{ item.pv }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import URL from '@/config/url.js';
import navBar from '@/components/navBar/navBar.vue';
// import service_mall from '@/service/mall.js';
import service_player from '@/service/player.js';
export default {
	data() {
		return {
			list: [],
			tabsBottomStyle: {
				'border-radius': ' 4rpx 4rpx 0rpx 0rpx',
				width: '40rpx',
				height: '8rpx',
				background: '#FFD425'
			},
			current: 0,
			currentTabsid: '', //分类id
			liveArr: [],
			ishide: false,
			token: '',
			userMobile: '',
			tabsheight: 45,
			currentPage: 1,
			navBarTitle: '话题',
			DataList: []
		};
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	onReady() {
		var value = uni.getStorageSync('LiveConfig');
		this.navBarTitle = value != '' ? value : '话题';

		// gio('setPage', {
		// 	pageName: value != '' ? value : '好物视频'
		// });
	},
	onLoad() {
		this.$utils.getUrl()
	},
	onShow() {
		this.userMobile = this.$store.state.index.userMobile;
		this.token = uni.getStorageSync('token');
		var value = uni.getStorageSync('LiveConfig');
		var that = this;
		var obj = uni.createSelectorQuery();
		setTimeout(() => {
			that.windowHeight = uni.getSystemInfoSync()['windowHeight']; //屏幕高度
			obj.select('.tabsList')
				.boundingClientRect(function(rect) {
					//获取子元素高度
					// console.log(rect);
					that.tabsheight = rect.height == 0 ? 45 : rect.height;
					that.getLvieList();
				})
				.exec();
		}, 200);
		that.getLvieCategory();
		if (value == '话题') {
			that.getDataList();
		}
	},
	methods: {
		gitdetail(id) {
			uni.navigateTo({
				url: '/pages_now/pages/now/article/detail?id=' + id
			});
		},
		//tabs的切换
		TabsChange(index) {
			this.current = index;
			this.currentTabsid = this.list[index].id;
			setTimeout(() => {
				this.getLvieList();
			}, 200);
		},
		// 获取分类列表
		getLvieCategory() {
			var that = this;
			service_player
				.getLvieCategory({})
				.then(res => {
					if (res.code == 1) {
						// console.log(res);
						let data = res.data;
						that.list = data;
						that.currentTabsid = data[0].id;
					} else {
						that.list = [];
					}
				})
				.catch(err => {});
		},
		getDataList() {
			var that = this;
			service_player
				.getArticle({})
				.then(res => {
					if (res.code == 1) {
						let data = res.data;
						that.DataList = data[2].articles;
					} else {
					}
				})
				.catch(err => {});
		},
		// 获取视频列表
		getLvieList(ispush) {
			var that = this;
			let params = {
				category_id: that.currentTabsid,
				page: that.currentPage
			};
			console.log(params);
			service_player
				.getLvieList(params)
				.then(res => {
					if (res.code == 1) {
						// console.log(res);
						let data = res.data;
						// console.log(456);
						// console.log(data);
						that.liveArr = data;
						// that.liveArr.push(data);
					} else {
						// that.list = []
					}
				})
				.catch(err => {});
		},
		//打开详情
		openLive(item, index) {
			var that = this;
			if (!this.token) {
				// console.log(123);
				uni.navigateTo({
					url: '/pages_login/pages/login/login/index'
				});
			} else {
				// console.log(item);
				let url = encodeURIComponent(item.play_url);
				uni.navigateTo({
					// url: '/pages_player/pages/playerDetailes/index?url='+ url +'&GroupID='+ item.im_group_id +'&isPage='+true
					url: '/pages_player/pages/playerDetailes/index?id=' + item.id
				});
			}
		},
		GoGoodsDetaile(item, index) {
			console.log(item);
			uni.navigateTo({
				url: '/pages_mall/pages/mall/goods_details/goods_details?id=' + item.id
			});
			// `/pages_mall/pages/mall/goods_details/goods_details?id=${items.product_id}`
		}
	}
};
</script>

<style lang="scss">
page {
	// background: #fff;
}
.ellipsisText {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.Player {
	.live {
		padding: 32rpx;
		box-sizing: border-box;

		.live_item {
			display: flex;
			align-items: flex-start;
			background: #fff;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.1);

			.live_image {
				margin-right: 24rpx;

				.live_left_img {
					width: 294rpx;
					height: 266rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.live_left_img_main {
					position: absolute;
					top: 0;
					display: flex;
					align-items: center;
					background-color: rgba(0, 0, 0, 0.4);
					border-radius: 8rpx;

					.live_left_img_top {
						border-radius: 8rpx 8rpx 8rpx 0rpx;
						background: #e9423e;
						padding: 6rpx 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 16rpx;
						color: #fff;
						font-weight: 400;

						image {
							width: 14rpx;
							height: 22rpx;
							margin-right: 8rpx;
						}
					}

					.live_left_img_top_look {
						font-size: 16rpx;
						font-weight: 400;
						color: #bcbcbc;
						padding: 0rpx 14rpx 0 6rpx;
					}
				}

				.live_left_img_bottom {
					position: absolute;
					bottom: 16rpx;
					z-index: 2;
					left: 16rpx;
					display: flex;
					align-items: center;

					image {
						width: 56rpx;
						height: 56rpx;
						margin-right: 16rpx;
						border-radius: 100%;
					}

					.live_left_img_bottom_nav {
						font-size: 24rpx;
						font-weight: 400;
						line-height: 34rpx;
						color: #ffffff;
					}
				}
			}

			.live_right {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				height: 254rpx;
				flex: 1;

				.live_right_title {
					font-size: 26rpx;
					color: #333;
					font-weight: bold;
					padding-right: 16rpx;
					line-height: 40rpx;
					margin-top: 10rpx;
				}

				.live_right_des {
					font-size: 26rpx;
					font-weight: 400;
					color: #666666;
					line-height: 34px;
				}

				.live_right_miaosha {
					display: flex;
					align-items: center;
					background: linear-gradient(166deg, #ffecc8 0%, #ffd581 100%);
					flex: 1;
					overflow: hidden;
					border-radius: 8rpx;

					.live_right_miaosha_img {
						width: 140rpx;
						height: 99rpx;
						margin-right: 22rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
						}

						.live_right_miaosha_text {
							position: absolute;
							top: 0;
							padding: 4rpx 8rpx;
							font-size: 12rpx;
							font-weight: 400;
							color: #fff;
							background: #e9423e;
							border-radius: 8rpx 0rpx 8rpx 0rpx;
						}
					}

					.live_right_miaosha_mian {
						font-size: 24rpx;
						font-weight: 400;
						color: #e9423e;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						flex: 1;
						padding-right: 22rpx;

						.live_right_miaosha_title {
							line-height: 34rpx;
						}

						.live_right_miaosha_pirce {
							font-weight: 600;
							line-height: 34rpx;
						}

						.live_right_miaosha_mun {
							color: #1a1c20;
							font-size: 20rpx;
							line-height: 34rpx;

							text {
								color: #e9423e;
							}
						}
					}
				}

				.live_right_goods {
					display: flex;
					align-items: center;

					.live_right_goods_item {
						position: relative;
						margin-right: 20rpx;
						border-radius: 8rpx;
						overflow: hidden;
						box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);

						image {
							width: 158rpx;
							height: 120rpx;
						}

						.live_right_goods_pirce {
							position: absolute;
							bottom: 4rpx;
							font-size: 20rpx;
							font-weight: 600;
							line-height: 22rpx;
							width: max-content;
							color: #ffffff;
							left: 50%;
							transform: translate(-50%, 0%);
						}
					}

					.live_right_goods_item:last-child {
						margin-right: 0rpx;
					}
				}
			}
		}
	}
}
</style>
